<template>
	<view class="container">
		<view class="v-header">
			<view class="v-logo-container">
				<image src="../../static/logo-text.png" mode="aspectFit" class="img-header"></image>
			</view>
		</view>

		<view class="v-form">
			<view class="v-form-title">账号登录</view>
			<view class="v-form-item">
				<uni-icons type="phone" class="icon-form-item" size="20" color="#000"></uni-icons>
				<input type="text" v-model="Account" class="input-form-item" placeholder="请输入手机号"
					placeholder-class="input-form-item-holder" />
			</view>
			<view class="v-form-item">
				<uni-icons type="locked" class="icon-form-item" size="20" color="#000"></uni-icons>
				<input v-model="Password" class="input-form-item" placeholder="请输入密码"
					placeholder-class="input-form-item-holder" password="true" />
			</view>
			<view class="v-form-item-left">
				<label>
					<checkbox-group name="" @change="isRememberChange">
						<label>
							<checkbox :checked="IsRemember" />
							<text class="input-form-item">记住密码</text>
						</label>
					</checkbox-group>
				</label>
			</view>
			<button type="default" class="btn-from-item" @click="login">登录</button>
			<view class="v-footer-title">没有账号？请先注册一个吧</view>
			<view class="v-split"></view>
			<view class="v-setting">
				<view class="v-img-setting-container">
					<image src="../../static/reg.png" mode="aspectFit" class="img-setting" @click="reg"></image>
				</view>
			</view>
		</view>
		<uni-popup ref="message" type="message" class="pop-msg">
			<uni-popup-message :type="msgType" :message="messageText" :duration="duration"></uni-popup-message>
		</uni-popup>
		<view class="loading-mask" v-show="visibleLoading">
			<view class="loading">
				<view class="loading-icon">
					<view class="mesh-loader">
						<view class="set-one circlegroup">
							<view class="circle"></view>
							<view class="circle"></view>
						</view>
						<view class="set-two circlegroup">
							<view class="circle"></view>
							<view class="circle"></view>
						</view>
					</view>
				</view>
				<!-- <div class="loading-title">下发中，请稍后...</div> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Account: '',
				Password: '',
				IsRemember: true,

				messageText: '',
				msgType: 'success',
				duration: 2000,

				visibleLoading: false
			};
		},
		methods: {
			showLoading() {
				this.visibleLoading = true;
			},
			hideLoading() {
				this.visibleLoading = false;
			},
			isRememberChange: function() {
				this.IsRemember = !this.IsRemember;
			},
			login: function() {
				let _this = this;
				try {
					if (_this.sysInfo.BasePath) {
						if (_this.validForm()) {
							let userData = {
								Account: _this.Account,
								Password: _this.Password,
							};
							_this.sysUtils.showLoading(_this);

							// //测试代码 开始
							// _this.sysUtils.hideLoading(_this);
							// uni.reLaunch({
							// 	url: '/pages/index/home',
							// 	success: (res) => {},
							// 	fail: () => {},
							// 	complete: () => {}
							// });
							// //测试代码 结束

							//正式代码
							uni.request({
								url: _this.sysInfo.BasePath + 'Auth/Login',
								method: 'POST',
								data: userData,
								header: {
									'content-type': 'application/json'
								},
								success: (res) => {
									if (res && res.data && res.data.Succeeded === true) {
										if (_this.IsRemember) {
											uni.setStorage({
												key: 'RemeberUser',
												data: res.data.Data
											});
										} else {
											uni.removeStorage({
												key: 'RemeberUser'
											});
										}
										uni.setStorage({
											key: 'CurrentUser',
											data: res.data.Data
										});
										uni.reLaunch({
											url: '/pages/index/home',
											success: (res) => {},
											fail: () => {},
											complete: () => {}
										});
									} else {
										_this.sysUtils.tip({
											sender: _this,

											title: '登录失败！',
											icon: 'error'
										});
									}
								},
								fail: () => {
									_this.sysUtils.tip({
										sender: _this,
										title: '登录失败！',
										icon: 'error'
									});
								},
								complete: () => {
									_this.sysUtils.hideLoading(_this);
								}
							});
						}
					} else {
						_this.sysUtils.tip({
							sender: _this,
							title: '登录失败！',
							icon: 'error'
						});
					}
				} catch (error) {
					_this.sysUtils.hideLoading(_this);
					// 异常处理逻辑
					_this.sysUtils.tip({
						sender: _this,
						title: '登录失败！',
						icon: 'error'
					});
				}
			},
			validForm: function() {
				let _this = this;
				if (!_this.Account) {
					_this.sysUtils.tip({
						sender: _this,
						title: '请输入手机号',
						icon: 'error'
					});
					return false;
				}
				if (!_this.Password) {
					_this.sysUtils.tip({
						sender: _this,
						title: '请输入密码',
						icon: 'error'
					});
					return false;
				}
				return true;
			},
			reg: function() {
				let _this = this;
				uni.navigateTo({
					url: '/pages/account/regist'
				});
			},
			init() {
				let _this = this;

				uni.removeStorage('CurrentUser');
				uni.getStorage({
					key: 'RemeberUser',
					success: (res) => {
						if (res) {
							console.log(res);
							uni.setStorage({
								key: 'CurrentUser',
								data: res.data
							});
							uni.reLaunch({
								url: '/pages/index/home',
								success: (res) => {},
								fail: () => {},
								complete: () => {}
							});
						}
					},
					fail: (error) => {
						console.log(error);
					}
				});
			}
		},
		created() {
			let _this = this;
			_this.init();
		}
	};
</script>

<style lang="scss">
	page {
		background: linear-gradient(145deg, #eab55eff, #c93a00ff);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		padding: 0;
		margin: 0;
	}

	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		height:100%;
	}

	.txt-title {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 50rpx;
		color: #ffffff;
	}

	.v-setting {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
	}

	.v-img-setting-container {
		// height: 90rpx;
		// width: 90rpx;
		// padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		// border-radius: 50rpx;
	}

	.img-setting {
		height: 80rpx;
		width: 80rpx;
		cursor: pointer;
	}

	.v-header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 100rpx;
	}

	.v-logo-container {
		padding: 20rpx;
		border-radius: 500rpx;
		background-color: #ce4d0e;
		box-sizing: border-box;
		height: 390rpx;
		width: 390rpx;
	}

	.img-header {
		height: 350rpx;
		width: 350rpx;
		border-radius: 500rpx;
	}

	.v-form {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		align-self: stretch;
		margin: 50rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 30rpx;
		margin-top: -150rpx;
		padding-top: 150rpx;
	}

	.v-form-title {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 32rpx;
		color: #ce4d0e;
		font-weight: bold;
	}

	.v-form-item {
		display: flex;
		flex-direction: row;
		height: 50rpx;
		align-items: center;
		padding: 20rpx 0;
		background-color: #f4f4f4;
		border-radius: 50rpx;
		margin-top: 30rpx;
		color: #000;
	}

	.icon-form-item {
		margin-left: 30rpx;
	}

	.v-form-item-left {
		display: flex;
		flex-direction: row;
		height: 60rpx;
		margin: 15rpx 0;
		justify-content: flex-start;
		align-items: center;
	}

	.input-form-item {
		color: #000;
		margin: 0 20rpx;
		font-size: 32rpx;
		flex: 1;
	}

	.input-form-item-holder {
		color: #ffffff;
		font-size: 32rpx;
	}

	.btn-from-item {
		margin-top: 35rpx;
		color: #fff !important;
		width: 100%;
		font-size: 36rpx;
		background-color: #ce4d0e !important;
		word-spacing: 20rpx !important;
		border-radius: 50rpx;
	}

	.btn-form-item-value {}

	::v-deep .uni-label-pointer {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.v-otherlogin {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.txt-other-title {
		font-size: 24rpx;
		color: #d2e7ff;
		margin-top: 80rpx;
	}

	.image-otherlogin {
		height: 80rpx;
		width: 80rpx;
		margin-top: 20rpx;
	}

	/* #ifdef H5 */
	.pop-msg {
		margin-top: -60rpx;
	}

	/* #endif */
	/* #ifdef APP-PLUS */
	.pop-msg {
		margin-top: 80rpx;
	}

	/* #endif */

	.v-footer-title {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		color: #989898;
		font-size: 24rpx;
		background-color: #fff;
		letter-spacing: 2rpx;
		z-index: 20;
		align-self: center;
		padding: 0 20rpx;
		margin-top: 50rpx;
	}

	.v-split {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background-color: #bababa;
		height: 1rpx;
		margin-top: -10rpx;
	}
</style>